import React, { Component } from "react";
import './Todo.css';
import TodoHeader from "../TodoHeader/TodoHeader";
import TodoMain from "../TodoMain/TodoMain";
import TodoFooter from "../TodoFooter/TodoFooter";
import { nanoid } from 'nanoid'
export default class Todo extends Component {
    state = {
        todos: [
            {id:1, title: '图书馆买书', done: false},  //do 过去完成时 做
            {id:2, title: '打水', done: true}
        ]
    }

    render() {
        //解构赋值
        let {todos} = this.state;
        
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <TodoHeader addTodo={this.addTodo} />
                    <TodoMain todos={todos} checkTodo={this.checkTodo} removeTodo={this.removeTodo} />
                    <TodoFooter checkAllTodo={this.checkAllTodo} todos={todos} cleanCompleted={this.cleanCompleted} />
                </div>
            </div>
        );
    }
    //声明方法  参数: 无
    cleanCompleted = () => {
        let {todos} = this.state;
        this.setState({
            todos: todos.filter(item => !item.done)
        })
    }

    //声明方法 批量修改任务的完成状态 参数:  任务状态
    checkAllTodo = (status) => {
        //获取所有的 todos
        let {todos} = this.state;
        //遍历
        let newTodos = todos.map(item => {
            //修改每一个任务的完成状态
            item.done = status;
            return item;
        });
        //设置
        this.setState({
            todos: newTodos
        })
    }

    //声明方法 删除任务   参数:  任务 id
    removeTodo = (id) => {
        //获取当前所有的任务
        let {todos} = this.state;
        //筛选
        let newTodos = todos.filter(item => {
            if(item.id === id){
                return false;
            }else{
                return true;
            }
        });
        //修改状态
        this.setState({
            todos: newTodos
        })
        
    }

    //声明方法 新增任务   参数:  任务名称
    addTodo = (title) => {
        //解构赋值
        let {todos} = this.state;
        //拼装对象
        let obj = {
            id: nanoid(),
            title,
            done: false
        };
        //修改状态
        this.setState({
            todos: [...todos, obj]
        })
    }

    //声明方法 修改完成状态 参数: 任务id,  任务status 
    checkTodo = (id, status) => {
        //获取现在的任务情况
        let {todos} = this.state;
        //调用 map 方法
        let newTodos = todos.map(item => {
            //判断
            if(item.id === id){
                item.done = status;
            }
            return item;
        })

        //修改状态
        this.setState({
            todos: newTodos
        })
    }

    //组件挂载完毕的钩子
    componentDidMount(){
        //测试 addTodo 
        // this.addTodo('买电脑');
        //测试
        // this.checkTodo(2, false);
        //测试删除
        // this.removeTodo(2);
        //测试批量修改状态
        // this.checkAllTodo(false);
        //测试删除所有完成的任务
        // this.cleanCompleted();
    }
}
